﻿<template>
  <div>
    <el-form label-position = "top" label-width="100">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="通用设置" name="base">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>基础设置(编号:{{myConfig.uid}})</span>
            </div>
            <div>
              <el-row type="flex" :gutter="5" class="config-row">
                <el-col :span="12">
                  <el-form-item label = "标题">
                    <el-input v-model = "myConfig.label"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label = "数据绑定Key">
                    <el-input v-model = "myConfig.dataKey"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row type="flex" :gutter="5" class="config-row">
                <el-col :span="12">
                  <el-form-item label = "是否显示label">
                    <el-switch v-model = "myConfig.showLabel"></el-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label = "Label占位Span">
                    <el-input-number v-model = "myConfig.labelSpan" size="small" controls-position="right" @change="handleLabelSpanChange" :min="0" :max="24"></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label = "是否显示">
                    <el-switch v-model = "myConfig.isShow"></el-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label = "是否可编辑">
                    <el-switch v-model = "myConfig.isEnable"></el-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label = "是否必输">
                    <el-switch v-model = "myConfig.isRequired"></el-switch>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-card>
          <el-divider></el-divider>
          <el-row type="flex" :gutter="5">
            <el-col :span="24">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>样式设定</span>
                  <el-button style="float: right; padding: 3px 0" type="text" @click="addStyleItem">添加</el-button>
                </div>
                <div>
                  <el-table :data = 'styleList' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
                    <el-table-column align = "center" prop = 'text' label = '样式名称'>
                      <template slot-scope = "scope">
                        <el-select v-model="scope.row.key" clearable placeholder="请选择">
                          <el-option
                            v-for="item in scope.row.keyOptions"
                            :key="item"
                            :label="item"
                            :value="item">
                          </el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column align = "center" prop = 'indexName' label = '值'>
                      <template slot-scope="scope">
                        <el-input v-model = "scope.row.value" placeholder = '请输入'></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column align = "center" label = "操作" width = "50">
                      <template slot-scope = "scope">
                        <el-button type = "text" size = "mini" @click = "handleOptionsRemove(scope.$index)" title = '移除'>
                          <i class = "iconfont icon-shanchu"></i>
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </el-collapse-item>
        <el-collapse-item title="事件设置" name="events">
          <el-card class="box-card" v-if="events.onClick && events.onClick.active">
            <div slot="header" class="clearfix">
              <span>onClick</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="addAction('onClick')">添加</el-button>
            </div>
            <div>
              <el-table :data = 'events.onClick.actions' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
                <el-table-column align = "center" prop = 'text' label = '事件'>
                  <template slot-scope = "scope">
                    <el-select v-model="scope.row.action" clearable placeholder="请选择">
                      <el-option
                        v-for="(item, index) in action_options"
                        :key="index"
                        :label="item.text"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column align = "center" prop = 'sort' label = '执行顺序'>
                  <template slot-scope="scope">
                    <el-input-number size="small" style="width:100%" controls-position="right" v-model="scope.row.sort" :min="1" :max="50"></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column align = "center" prop = 'settings' label = '设置'>
                  <template slot-scope="scope">
                    <el-button type = "text" size = "mini" @click = "handleActionSettings('onClick',scope.$index)" title = '...'>
                      <i class = "iconfont icon-shezhi"></i>
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column align = "center" label = "操作" width = "50">
                  <template slot-scope = "scope">
                    <el-button type = "text" size = "mini" @click = "handleActionRemove('onClick',scope.$index)" title = '移除'>
                      <i class = "iconfont icon-shanchu"></i>
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
          <el-card class="box-card" v-if="events.onDClick && events.onDClick.active">
            <div slot="header" class="clearfix">
              <span>onDClick</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="addAction('onDClick')">添加</el-button>
            </div>
            <div>
              <el-table :data = 'events.onDClick.actions' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
                <el-table-column align = "center" prop = 'text' label = '事件'>
                  <template slot-scope = "scope">
                    <el-select v-model="scope.row.action" clearable placeholder="请选择">
                      <el-option
                        v-for="(item, index) in action_options"
                        :key="index"
                        :label="item.text"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column align = "center" prop = 'sort' label = '执行顺序'>
                  <template slot-scope="scope">
                    <el-input-number size="small" style="width:100%" controls-position="right" v-model="scope.row.sort" :min="1" :max="50"></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column align = "center" prop = 'settings' label = '设置'>
                  <template slot-scope="scope">
                    <el-button type = "text" size = "mini" @click = "handleActionSettings('onDClick',scope.$index)" title = '...'>
                      <i class = "iconfont icon-shezhi"></i>
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column align = "center" label = "操作" width = "50">
                  <template slot-scope = "scope">
                    <el-button type = "text" size = "mini" @click = "handleActionRemove('onDClick',scope.$index)" title = '移除'>
                      <i class = "iconfont icon-shanchu"></i>
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
          <el-card class="box-card" v-if="events.onRowClick && events.onRowClick.active">
            <div slot="header" class="clearfix">
              <span>onRowClick</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="addAction('onRowClick')">添加</el-button>
            </div>
            <div>
              <el-table :data = 'events.onRowClick.actions' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
                <el-table-column align = "center" prop = 'text' label = '事件'>
                  <template slot-scope = "scope">
                    <el-select v-model="scope.row.action" clearable placeholder="请选择">
                      <el-option
                        v-for="(item, index) in action_options"
                        :key="index"
                        :label="item.text"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column align = "center" prop = 'sort' label = '执行顺序'>
                  <template slot-scope="scope">
                    <el-input-number size="small" style="width:100%" controls-position="right" v-model="scope.row.sort" :min="1" :max="50"></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column align = "center" prop = 'settings' label = '设置'>
                  <template slot-scope="scope">
                    <el-button type = "text" size = "mini" @click = "handleActionSettings('onRowClick',scope.$index)" title = '...'>
                      <i class = "iconfont icon-shezhi"></i>
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column align = "center" label = "操作" width = "50">
                  <template slot-scope = "scope">
                    <el-button type = "text" size = "mini" @click = "handleActionRemove('onRowClick',scope.$index)" title = '移除'>
                      <i class = "iconfont icon-shanchu"></i>
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
          <el-card class="box-card" v-if="events.onRowDClick && events.onRowDClick.active">
            <div slot="header" class="clearfix">
              <span>onRowDClick</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="addAction('onRowDClick')">添加</el-button>
            </div>
            <div>
              <el-table :data = 'events.onRowDClick.actions' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
                <el-table-column align = "center" prop = 'text' label = '事件'>
                  <template slot-scope = "scope">
                    <el-select v-model="scope.row.action" clearable placeholder="请选择">
                      <el-option
                        v-for="(item, index) in action_options"
                        :key="index"
                        :label="item.text"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column align = "center" prop = 'sort' label = '执行顺序'>
                  <template slot-scope="scope">
                    <el-input-number size="small" style="width:100%" controls-position="right" v-model="scope.row.sort" :min="1" :max="50"></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column align = "center" prop = 'settings' label = '设置'>
                  <template slot-scope="scope">
                    <el-button type = "text" size = "mini" @click = "handleActionSettings('onRowDClick',scope.$index)" title = '...'>
                      <i class = "iconfont icon-shezhi"></i>
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column align = "center" label = "操作" width = "50">
                  <template slot-scope = "scope">
                    <el-button type = "text" size = "mini" @click = "handleActionRemove('onRowDClick',scope.$index)" title = '移除'>
                      <i class = "iconfont icon-shanchu"></i>
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
          <el-card class="box-card" v-if="events.onChange && events.onChange.active">
            <div slot="header" class="clearfix">
              <span>onChange</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="addAction('onChange')">添加</el-button>
            </div>
            <div>
              <el-table :data = 'events.onChange.actions' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
                <el-table-column align = "center" prop = 'text' label = '事件'>
                  <template slot-scope = "scope">
                    <el-select v-model="scope.row.action" clearable placeholder="请选择">
                      <el-option
                        v-for="(item, index) in action_options"
                        :key="index"
                        :label="item.text"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column align = "center" prop = 'sort' label = '执行顺序'>
                  <template slot-scope="scope">
                    <el-input-number size="small" style="width:100%" controls-position="right" v-model="scope.row.sort" :min="1" :max="50"></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column align = "center" prop = 'settings' label = '设置'>
                  <template slot-scope="scope">
                    <el-button type = "text" size = "mini" @click = "handleActionSettings('onChange',scope.$index)" title = '...'>
                      <i class = "iconfont icon-shezhi"></i>
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column align = "center" label = "操作" width = "50">
                  <template slot-scope = "scope">
                    <el-button type = "text" size = "mini" @click = "handleActionRemove('onChange',scope.$index)" title = '移除'>
                      <i class = "iconfont icon-shanchu"></i>
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
          <el-card class="box-card" v-if="events.onSelected && events.onSelected.active">
            <div slot="header" class="clearfix">
              <span>onSelected</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="addAction('onSelected')">添加</el-button>
            </div>
            <div>
              <el-table :data = 'events.onSelected.actions' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
                <el-table-column align = "center" prop = 'text' label = '事件'>
                  <template slot-scope = "scope">
                    <el-select v-model="scope.row.action" clearable placeholder="请选择">
                      <el-option
                        v-for="(item, index) in action_options"
                        :key="index"
                        :label="item.text"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column align = "center" prop = 'sort' label = '执行顺序'>
                  <template slot-scope="scope">
                    <el-input-number size="small" style="width:100%" controls-position="right" v-model="scope.row.sort" :min="1" :max="50"></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column align = "center" prop = 'settings' label = '设置'>
                  <template slot-scope="scope">
                    <el-button type = "text" size = "mini" @click = "handleActionSettings('onSelected',scope.$index)" title = '...'>
                      <i class = "iconfont icon-shezhi"></i>
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column align = "center" label = "操作" width = "50">
                  <template slot-scope = "scope">
                    <el-button type = "text" size = "mini" @click = "handleActionRemove('onSelected',scope.$index)" title = '移除'>
                      <i class = "iconfont icon-shanchu"></i>
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
          <el-card class="box-card" v-if="events.onOperationTrigger && events.onOperationTrigger.active">
            <div slot="header" class="clearfix">
              <span>onOperationTrigger</span>
              <el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
            </div>
          </el-card>
        </el-collapse-item>
        <el-collapse-item title="专属设置" name="spacial">
          <slot>暂无</slot>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <event-action-config
    :show="cur_action.show"
    :actionName="cur_action.actionName"
    :actionSetting="cur_action.data"
    :otherOptions="{showValidPage: true}"
    @onSubmit="handleSettingChange" @onCancel="handleSettingCancel"></event-action-config>
  </div>
</template>
<script>
import eventActionConfig from './eventActionConfig.vue'
import {deepCopy} from '../commonUse'
export default {
  props: ['config', 'events'],
  components: {eventActionConfig},
  data () {
    return {
      activeNames: ['spacial'],
      styleList: [],
      styleOptions: ['height', 'max-height', 'width', 'padding', 'margin', 'border', 'background', 'color'],
      myConfig: {
        uid: '',
        isDesignMode: true,
        isRequired: false,
        isShow: false,
        isEnable: false,
        myStyle: {},
        dataKey: '',
        label: '',
        showLabel: false,
        labelSpan: 4,
        allowChild: false,
        children: []
      },
      action_options: [{
        value: 'api',
        text: '内部API'
      }, {
        value: 'outer_api',
        text: '外部API'
      }, {
        value: 'script',
        text: '脚本'
      }, {
        value: 'pop',
        text: '弹出页面'
      }, {
        value: 'redirect',
        text: '跳转页面'
      }, {
        value: 'close',
        text: '关闭页面'
      }, {
        value: 'metaAdd',
        text: '新增'
      }, {
        value: 'metaUpdate',
        text: '修改'
      }, {
        value: 'metaSave',
        text: '保存'
      }, {
        value: 'metaRemove',
        text: '逻辑删除'
      }, {
        value: 'metaActive',
        text: '启用'
      }, {
        value: 'metaDeactive',
        text: '停用'
      }, {
        value: 'metaSubmit',
        text: '提交'
      }, {
        value: 'metaSaveAndSubmit',
        text: '保存并提交'
      }, {
        value: 'metaPass',
        text: '通过'
      }, {
        value: 'metaReject',
        text: '驳回'
      }, {
        value: 'metaFinish',
        text: '完成'
      }, {
        value: 'metaStop',
        text: '终止'
      }],
      cur_action: {
        show: false,
        event_name: '',
        action_index: 0,
        actionName: '',
        data: {}
      }
    }
  },
  watch: {
    styleList: {
      handler: function (val, oldVal) {
        let myStyle = {}
        this.styleList.forEach(item => {
          myStyle[item.key] = item.value
        })
        this.config.myStyle = myStyle
      },
      deep: true
    },
    'myConfig.showLabel': {
      handler: function (val, oldVal) {
        this.$set(this.config, 'showLabel', val)
      },
      deep: true
    },
    'myConfig.dataKey': {
      handler: function (val, oldVal) {
        this.config.dataKey = val
      },
      deep: true
    },
    'myConfig.label': {
      handler: function (val, oldVal) {
        this.config.label = val
      },
      deep: true
    },
    'myConfig.isShow': {
      handler: function (val, oldVal) {
        this.config.isShow = val
      },
      deep: true
    },
    'myConfig.isEnable': {
      handler: function (val, oldVal) {
        this.config.isEnable = val
      },
      deep: true
    },
    'myConfig.children': {
      handler: function (val, oldVal) {
        this.config.children = val
      },
      deep: true
    },
    'myConfig.isRequired': {
      handler: function (val, oldVal) {
        this.config.isRequired = val
      },
      deep: true
    }
  },
  onUnmounted () {
    this.myConfig = {}
  },
  mounted () {
    Object.assign(this.myConfig, this.config)
    if (this.config.myStyle) {
      let keys = Object.keys(this.config.myStyle)
      let self = this
      keys.forEach((item, index) => {
        self.styleList.push({
          key: item,
          value: self.config.myStyle[item],
          keyOptions: self.styleOptions
        })
      })
    }
  },
  methods: {
    addStyleItem () {
      let l = deepCopy(this.styleOptions)
      this.styleList.push({
        key: '',
        value: '',
        keyOptions: l
      })
    },
    addAction (category) {
      this.events[category].actions.push({
        action: '',
        sort: 0,
        settings: {}
      })
    },
    handleOptionsRemove (index) {
      this.styleList.splice(index, 1)
    },
    handleLabelSpanChange () {
      this.config.labelSpan = this.myConfig.labelSpan
    },
    handleActionRemove (category, index) {
      this.events[category].actions.splice(index, 1)
    },
    handleActionSettings (category, index) {
      this.cur_action.event_name = category
      this.cur_action.action_index = index
      this.cur_action.actionName = this.events[category].actions[index].action
      this.cur_action.data = this.events[category].actions[index].settings
      this.cur_action.show = true
    },
    handleSettingChange (settings) {
      this.events[this.cur_action.event_name].actions[this.cur_action.action_index].settings = settings
      this.cur_action.show = false
    },
    handleSettingCancel () {
      this.cur_action.show = false
    }
  }
}
</script>
<style lang="scss">
.dcomponent-config {
  padding: 0 10px 10px 10px;
}
.config-row {
  border-top: 0px solid #ebebeb
}
.tips {
  color: #f56c6c !important;
  font: italic bold 12px/30px
}
.el-dialog-div {
  height: 70vh;
  overflow-y: auto;
}
.pop {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  .el-dialog {
    margin: 0 auto !important;
    .el-dialog__body {
      max-height: 70vh;
      overflow-y: auto;
    }
  }
}
#editorId {
  width:100%;
  height: 660px;
}
@media (max-width:1367px) {
  #editorId {
    height: 400px;
  }
}
</style>
